import { useCallback, useEffect, useRef, useState } from "react";
import * as echarts from 'echarts';
import MyChart from ".";


export interface IPieChartData {
    value: number
    name: string
}
interface IPieChartProp {
    title: string
    data: IPieChartData[]
}

const PieChart: React.FC<IPieChartProp> = (props) => {

    const [option, setOption] = useState<echarts.EChartsOption>({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: '标题',
                fontSize: 28
            }
        },
    })

    useEffect(() => {
        const customOption: echarts.EChartsOption = {
            ...option,
            graphic: {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: props.title,
                    fontSize: 28
                }
            },
            series: [
                {
                    name: props.title,
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    data: props.data
                }
            ]
        };
        setOption(customOption);
        
    }, [props.title, props.data])


    return (
        <MyChart option={option} title={props.title} />
    )
}

export default PieChart;
